<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stu-manage</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/admin/layui-v2.4.5/layui/css/layui.css" media="all">

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="/admin/layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
    <!-- <script>
         layui.use('table', function () {
             var table = layui.table;
             table.render({
                 elem: '#student'
                 , url: '/allResult'
                 , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                 , limit: 5
                 , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                     layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
                     , limits: [5, 10, 15]
                     , first: false //不显示首页
                     , last: false //不显示尾页
                 }
                 // , toolbar: 'default'
                 , cols: [[
                     {type: 'checkbox', fixed: 'left'}
                     , {field: 'id', title: 'ID', sort: true}
                     , {field: 'num', title: '学号', sort: true}
                     , {field: 'stuName', title: '姓名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                     , {field: 'age', title: '年龄', sort: true}
                     , {field: 'sex', title: '性别'}
                     , {field: 'contact', title: '联系方式'}
                     , {field: 'deptName', title: '所属院系'}
                     , {field: 'proName', title: '项目'}
                     , {field: 'result', title: '结果'}
                     // , {field: 'qualify', title: '是否合格', align: 'center'}
                     // , {field: 'classify', title: '职业', align: 'center'} //单元格内容水平居中
                     // , {field: 'experience', title: '积分', sort: true, align: 'right'} //单元格内容水平居中
                     // , {field: 'score', title: '评分', sort: true, align: 'right'}
                     , {field: 'remark', title: '备注', align: 'right'}
                     // , {fixed: 'right', title: '操作', toolbar: '#editBar', width: 150}
                 ]]
             });
         })
     </script>-->

    <script>
        tableLoad();
        function tableLoad(){
            $.ajax({
                url:"/allStudent",
                type:"GET",
                dataType:"json",
                success:function (data) {
                    $.each(data,function (index,ele) {
                        $("#stu-table").append(" <tr>\n" +
                            "            <td style=\"display: none\">"+ele.id+"</td>\n" +
                            "            <td>"+ele.num+"</td>\n" +
                            "            <td>"+ele.name+"</td>\n" +
                            "            <td>"+ele.age+"</td>\n" +
                            "            <td>"+ele.sex+"</td>\n" +
                            "            <td>"+ele.nation+"</td>\n" +
                            "            <td>"+ele.contact+"</td>\n" +
                            "            <td>"+ele.deptName+"</td>\n" +
                            "            <td>"+ele.remark+"</td>\n" +
                            "        </tr>")
                    });
                },
                error:function () {
                    alert("数据加载失败!!!");
                }
            });
        }

        //保存按钮监听事件
        $("#register-submit").click(function () {
            var num = $('#set-num').val();
            var name = $('#set-name').val();
            var age = $('#set-age').val();
            var sex = $('#sex-select option:selected').val();
            var nation = $('#set-nation').val();
            var contact = $('#set-contact').val();
            var depart = $('#dept-select option:selected').val();
            var remark = $('#set-remark').val();//用数据库中的remark字段保存身份证号
            //此ajax用来插入新的病人
            $.ajax({
                url: "/addStudent",
                type: "post",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: JSON.stringify({
                    "num": num,
                    "name": name,
                    "sex": sex,
                    "age": age,
                    "nation": nation,
                    "contact": contact,
                    "deptId": depart,
                    "remark": remark
                }),
                success: function () {
                    alert("添加成功");
                   tableLoad();
                }
            });
        });

        //重置按钮监听事件
        $("#register-clear").click(function () {
            $('#set-contact').val("");
            $('#set-age').val("");
            $('#set-name').val("");
            $('#set-nation').val("");
            $('#office-select').val("");
            $('#sex-select').val();
            $('#set-remark').val("");
        });

    </script>
    <link rel="stylesheet" href="../admin/css/dia-register1.css">
</head>
<body>
<div id="add-stu" class="register-info">
    <div class="item">
        <label class="layui-form-label" style="size: 30px">学号</label>
        <input id="set-num" type="text" autocomplete="off" placeholder="请输入学号" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">姓名</label>
        <input id="set-name" type="text" autocomplete="off" placeholder="请输入姓名" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">年龄</label>
        <input id="set-age" type="text" autocomplete="off" placeholder="请输入年龄" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">性别</label>
        <select class="select-input" id="sex-select">
            <option value="">请选择性别</option>
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">民族</label>
        <input id="set-nation" type="text" autocomplete="off" placeholder="请输入民族" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">联系方式</label>
        <input id="set-contact" type="text" autocomplete="off" placeholder="请输入联系方式" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">学院</label>
        <select class="select-input" id="dept-select">
            <option value="">请选择学院</option>
            <option value="1">A学院</option>
            <option value="2">B学院</option>
            <option value="3">C学院</option>
            <option value="4">D学院</option>
        </select>
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">备注</label>
        <input id="set-remark" type="text" autocomplete="off" placeholder="请输入备注" class="input">
    </div>
    <div class="input-block">
        <button class="register-button" id="register-submit">保存</button>
        <button class="register-button" id="register-clear">重置</button>
    </div>
</div>

<div class="layui-form">
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col width="150">
            <col width="100">
            <col width="150">
            <col width="150">
            <col width="150">
            <col width="150">
            <col width="150">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th style="display: none">id</th>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>民族</th>
            <th>联系方式</th>
            <th>所属学院</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody id="stu-table">
       <!-- <tr>
            <td style="display: none">1</td>
            <td>001</td>
            <td>张三</td>
            <td>19</td>
            <td>男</td>
            <td>han</td>
            <td>111111</td>
            <td>A学院</td>
            <td>null</td>
        </tr>-->
        </tbody>
    </table>
</div>
</body>
</html>